<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>360导航</title>
	<link rel="stylesheet" href="./css/copy.css">
</head>
<body>
	
	<div id="fullpage">
		<!-- 第一屏 -->
		<div class="section first">
			<!-- LOGO -->
			<div class="logo"></div>
			<!-- 文字 -->
			<div class="text">
				<img src="./images/text_1.png" alt="">
				<img src="./images/text_2.png" alt="">
				<img src="./images/text_3.png" alt="">
				<img src="./images/text_4.png" alt="">
				<img src="./images/text_5.png" alt="">
				<img src="./images/text_6.png" alt="">
				<img src="./images/text_7.png" alt="">
				<img src="./images/text_8.png" alt="">
			</div>
			<!-- 其它信息 -->
			<div class="info"></div>
		</div>
		<!-- 第二屏 -->
		<div class="section second">
			<!-- 盾牌 -->
			<div class="shield">
				<img src="./images/shield_1.png" alt="">
				<img src="./images/shield_2.png" alt="">
				<img src="./images/shield_3.png" alt="">
				<img src="./images/shield_4.png" alt="">
				<img src="./images/shield_5.png" alt="">
				<img src="./images/shield_6.png" alt="">
				<img src="./images/shield_7.png" alt="">
				<img src="./images/shield_8.png" alt="">
				<img src="./images/shield_9.png" alt="">
			</div>
			<!-- 其它信息 -->
			<div class="info"></div>
		</div>
		<!-- 第三屏 -->
		<div class="section third">
			<!-- 其它信息 -->
			<div class="info"></div>
			<!-- 圆 -->
			<div class="circle"></div>
			<!-- 火箭 -->
			<div class="rocket"></div>
		</div>
		<!-- 第四屏 -->
		<div class="section fourth">
			<!-- 搜索 -->
			<div class="search">
				<!-- 搜索框 -->
				<div class="search-box"></div>
				<!-- 搜索结果 -->
				<div class="result">
					<img src="./images/result.png" alt="">
				</div>
				<!-- 关键字 -->
				<div class="keys"></div>
			</div>
			<!-- 其它 -->
			<div class="info"></div>
		</div>
		<!-- 第五屏 -->
		<div class="section fifth">
			<!-- 其它信息 -->
			<div class="info"></div>
			<!-- 浏览器 -->
			<div class="browser">
				<!-- 四边框 -->
				<div class="leftborder"></div>
				<div class="rightborder"></div>
				<div class="topborder"></div>
				<div class="bottomborder"></div>
				<!-- 工具栏 -->
				<div class="toolbar"></div>
				<!-- 边框 -->
				<div class="border-wrap">
					<div class="border"></div>
				</div>
				<!-- 状态栏 -->
				<div class="line"></div>
				<div class="extra"></div>
			</div>
		</div>
	</div> 

	<script src="./js/jquery.min.js"></script>
	<script src="./js/jquery.fullPage.min.js"></script>
	<script>
		// 
		$('#fullpage').fullpage({
			sectionsColor: ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
			// 
			afterLoad: function (anchorLink, index) {
				// index 表示当前屏的索引值
				// 从1开始
				console.log(index);

				// 清除所有屏的current
				$('.section').removeClass('current');

				// 当前屏添加类名
				setTimeout(function () {
					$('.section').eq(index - 1).addClass('current');
				}, 10);

				// $('.first').addClass('current');
			}
		});
	</script>
</body>
</html>